<script setup lang="ts">
import { toRefs } from "vue";
let props = defineProps(["type", "label"]);
let emit = defineEmits(["click"]);
let { type, label } = toRefs(props);

let handleClick = () => {
  emit("click");
};
</script>

<template>
  <div
    @click="handleClick"
    class="com-button-view-ghost"
    v-if="type === 'ghost'"
  >
    {{ label }}
  </div>
  <div @click="handleClick" class="com-button-view" v-else>
    {{ label }}
  </div>
</template>

<style lang="less" scoped>
.com-button-view {
  height: 62rpx;
  background: #3973ff;
  border-radius: 31rpx;
  padding: 0 24rpx;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #ffffff;
  white-space: nowrap;
  box-sizing: border-box;
}
.com-button-view-ghost {
  height: 62rpx;
  background: #fff;
  border-radius: 31rpx;
  padding: 0 24rpx;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1rpx solid #3973ff;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #3973ff;
  white-space: nowrap;
  box-sizing: border-box;
}
</style>
